<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>汐众智能</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesdesign" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="/assets/images/favicon.ico">

        <!-- slick css -->
        <link href="/assets/libs/slick-slider/slick/slick.css" rel="stylesheet" type="text/css" />
        <link href="/assets/libs/slick-slider/slick/slick-theme.css" rel="stylesheet" type="text/css" />

        <!-- jvectormap -->
        <link href="/assets/libs/jqvmap/jqvmap.min.css" rel="stylesheet" />

        <!-- Bootstrap Css -->
        <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" />
<link href="/static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" ></link>
<link  href="/static/lib/sweetalert/sweetalert.css"  rel="stylesheet">

<!-- <link href="/static/lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
-->
<link rel="stylesheet" href="/static/lib/bootstrap-table/1.16.0/bootstrap-table.min.css">
  
<!-- 
<link href="/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link href="/assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        
        -->
<link href="/static/lib/layer/layer.dev.css" rel="stylesheet" id="layui_layer_skinlayercss">
<link href="/static/lib/layer/layer.ext.css" rel="stylesheet" id="layui_layer_skinlayerextcss">
 <script src="/static/lib/flv/flv.min.js" type="text/javascript" ></script>  
 
        <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
    </head>
<body style="padding: 20px;">
    
 <div class="row" id="live_test">
    <div class="col-6">
		    <div class="card">
			<div class="card-body">
			
			    <div class="form-group row">
			        <label for="example-text-input" class="col-md-2 col-form-label">deviceNum</label>
			        <div class="col-md-10">
			            <input class="form-control" type="text" value="" v-model="live.deviceNum" >
			        </div>
			    </div>
			    <div class="form-group row">
			        <label for="example-search-input" class="col-md-2 col-form-label">channelId</label>
			        <div class="col-md-10">
			            <input class="form-control" type="text"   v-model="live.channelId" >
			        </div>
			    </div>
			    
			    <div class="form-group" style="padding-right: 15px;padding-left: 15px;">
                 <button type="button" class="btn btn-light" v-on:click="startLive">播放</button>
                 <button type="button" class="btn btn-info float-right"  v-on:click="stoptLive">停止</button>
              </div> 
			    
			</div>
		</div>

    </div>
    <div class="col-6">
   	 <div id="id_test_video" style="width:100%; height:auto;"></div>
    </div>
</div>                         
 <script src="/static/lib/vue/vue.min.v2.js" type="text/javascript" ></script>
 <script src="/assets/libs/jquery/jquery.min.js"></script>
 <script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="/assets/libs/metismenu/metisMenu.min.js"></script>
 <script src="/assets/libs/simplebar/simplebar.min.js"></script>
 <script src="/assets/libs/node-waves/waves.min.js"></script>
<script src="/assets/libs/slick-slider/slick/slick.min.js"></script>
<script src="/static/lib/jquery-validation/jquery.validate.min.js" type="text/javascript" ></script>
<script src="/static/lib/jquery-validation/localization/messages_zh.min.js" type="text/javascript" ></script>
<script src="/static/lib/routie/routie.min.js" type="text/javascript" ></script>
<script src="/static/lib/store/store.min.js" type="text/javascript" ></script>
<script src="/static/lib/pace/pace.min.js" type="text/javascript" ></script>
<script src="/static/lib/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/static/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/static/lib/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/static/lib/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/lib/sweetalert/sweetalert.min.js" type="text/javascript" ></script>
<script src="/static/lib/layer/layer.dev.js" type="text/javascript" ></script>
<script src="/static/lib/layer/layer.ext.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.alert.swal.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.core.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.ajax.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.util.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.storage.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.vue.directive.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.routie.newPage.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.layer.editDialog.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.bootstrap.table.js" type="text/javascript" ></script>
<script src="/static/lib/_zfes/zfes.permisison.js" type="text/javascript" ></script>
<script type="text/javascript">

var news= new Vue({
    el: '#live_test',
    data: {
    	live:{
    		 deviceNum: 'FF_505152069029',
			 channelId : '0000',
			 requestId: null,
			 urlLoadSuccess: false,
			 loadUrlTimes: 0,
			 interval: null
    	},
    	
    	
    	bus:new Vue()
     },
     mounted:function(){
    	 var _this=this;
    	 _this.live.requestId=_this.generateUUID();
     },
     methods: {
    		startLive: function () {
    	    		var _this=this;
    	    		var url="/api/user/live/startLive/"+_this.live.deviceNum+"/"+_this.live.channelId+"/"+_this.live.requestId+"";
    	    		zfesAjax.ajaxJson(url,{}, function(data){
    	    			setTimeout(function(){  
    	    				_this.loadLiveUrl();
    	    				_this.live.loadUrlTimes++;
    	    			}, 500);
    	    			
    	    			_this.live.interval = setInterval(() => {
    	    								_this.requestHeartBeat();
					                     }, 3000);
    	    			
    	        	})
    	    },
    	    loadLiveUrl: function(){
	    		var _this=this;
	    		var url="/api/user/live/loadVideoUrl/"+_this.live.deviceNum+"/"+_this.live.channelId+"/"+_this.live.requestId+"";
	    		zfesAjax.ajaxJson(url,{}, function(data){
	    			console.log("-succ-loadLiveUrl:",data);
	    			_this.live.urlLoadSuccess=true;
    				 doPlay(data.data.liveUrl);
    				
	        	},function(data){
	        		console.log("-err-loadLiveUrl:",data);
	        		setTimeout(function(){ 
	        			if(_this.live.loadUrlTimes > 5){
    						alertSwal.warningText("重试加载超过5次，放弃播放");
    						clearInterval(_this.live.interval);
    						return ;
    					}
	    				_this.loadLiveUrl();
	    				_this.live.loadUrlTimes++;
	    				
	    			}, 2000);
	        		
	        	})
	     	 },
    	    stoptLive: function(){
    	    	var _this=this;
	    		var url="/api/user/live/stopLive/"+_this.live.deviceNum+"/"+_this.live.channelId+"/"+_this.live.requestId+"";
	    		zfesAjax.ajaxJson(url,{}, function(data){
	    			console.log("-stoptLive:",data);
	    			clearInterval(_this.live.interval);
	    			 _this.live.requestId=_this.generateUUID();
	    			alertSwal.successText(data.message);
	        	})
    	    },
    	    
    	    requestHeartBeat: function () {
	    		var _this=this;
	    		var url="/api/user/live/liveRequestHeartBeat/"+_this.live.deviceNum+"/"+_this.live.channelId+"/"+_this.live.requestId+"";
	    		zfesAjax.ajaxJson(url,{}, function(data){
	    			console.log("---requestHeartBeat---",data);
	    		})
	    	},
	    
    	    generateUUID: function () {
    	        var d = new Date().getTime();
    	        if (window.performance && typeof window.performance.now === "function") {
    	            d += performance.now(); //use high-precision timer if available
    	        }
    	        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    	            var r = (d + Math.random() * 16) % 16 | 0;
    	            d = Math.floor(d / 16);
    	            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    	        });
    	        return uuid;
    	    }
    }
});

</script>
 <script type="text/javascript">
    function doPlay(url){
    	console.log("==doPlay==url=",url);
    	  var player = new TcPlayer('id_test_video', {
    	    	"m3u8": "http://1304320487.vod2.myqcloud.com/beab3ec2vodcq1304320487/919b4b0b5285890811023386269/f0.mp4", //请替换成实际可用的播放地址
    	    	"m3u8": url,//"http://47.92.196.10:8080/live/xz2.flv",
    	    	"live": true,
    	    	"x5_type": 'h5',
    	    	"preload": true,
    	    	"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    	    	//"poster" : "http://1304320487.vod2.myqcloud.com/beab3ec2vodcq1304320487/919b4b0b5285890811023386269/5285890811023386272.jpg",
    	    	"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
    	    	"height" : '320',//视频的显示高度，请尽量使用视频分辨率高度
    	    	"wording": {
    	    	    2032: "请求视频失败，请检查网络",
    	    	    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
    	    	},
    	    	 "listener": function(e) { //监听事件
    	                 if (e.type == "fullscreen") { //视频播放全屏可切换横屏
    	                     if (e.detail.isFullscreen == true) {
    	                         plus.screen.unlockOrientation("landscape-primary"); //横屏 mui写法
    	                     } else if (e.detail.isFullscreen == false) {
    	                         plus.screen.lockOrientation("portrait-primary");//强制竖屏 mui写法
    	                     }
    	                 }
    	                 if(e.type == 'load') { //加载完事件
    	                	 setInterval(() => {
    	                		// player.togglePlay();
    	                     }, 10*1000);
    	                 
    	     				//解决微信浏览器脱离文档流播放的问题；
    	     				//TCPlayerLite文档设置"x5_type": "h5"在安卓微信浏览器不生效，以下代码可解决：
    	     				//document.querySelector('id_test_video').setAttribute('x5-video-player-type', 'h5-page');
    	     				//document.querySelector('id_test_video').setAttribute('x5-video-player-fullscreen', 'false');
    	     				//document.querySelector('id_test_video').setAttribute('x5-video-orientation', 'portrait');
    	     			}	
    	    		 }
    	    		 
    	    	});
    }
  
    </script>
    </body>
</html>